<template>
    <div>
        <el-button type="primary" @click="backPage" class="mb8">返回</el-button>
        <el-table :data="tableData" style="width: 80%;margin: auto;" border>
            <el-table-column prop="name">
                <template #header>
                    <span><span style="color: red;">*</span>名称</span>
                </template>
            </el-table-column>
            <el-table-column>
                <template #header>
                    <span><span style="color: red;">*</span>值</span>
                </template>
                <template #default="scope">
                    <el-input v-model="scope.row.value" placeholder="请输入" :disabled="!scope.row.status" />
                </template>
            </el-table-column>
        </el-table>
        <div style="text-align: center;margin: 40px 0;">
            <el-button type="primary" @click="handleSave">发布</el-button><el-button type="primary" plain
                @click="backPage">取消</el-button>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const tableData = ref([])
onMounted(() => { getTemplate() })
const getTemplate = () => {
    site.general.websitepublishrecordGetpublishtemplate(
        {}
    ).then((res) => {
        tableData.value = res.data.content ? JSON.parse(res.data.content) : []
        console.log(tableData.value);
    });
}
const handleSave = () => {
    if (validateAndSubmit(tableData.value)) return proxy.$modal.msgWarning(`请填写完整`);
    let result = tableData.value.map(item => `${item.key}=${item.value}`).join('\n');
    proxy.$modal.confirm("是否确认此配置发布？").then(() => {
        site.general
            .sitewebsitePublishwebsite({
                pathParams: {
                    id: Number(route.query.id),
                },
                data: {
                    content: result
                },
            })
            .then((res) => {
                if (res.code !== 200) return;
                backPage()
                proxy.$modal.msgSuccess(res.message);
            });
    });
}
const validateAndSubmit = (list) => {
    return list.some(row => !row.name.trim() || !row.key.trim() || !row.value.trim());
}
// 返回
const backPage = () => {
    router.back();
};
</script>